<template>
  <div>
    <h2>计算属性computed</h2>
    <!-- 计算属性有缓存的特点  保存在内存中  下次再调用是 函数就不在重新计算 就直接从缓存中取出来用 -->
    <!-- <p>{{xing}} {{ming}}</p> -->
    <p>{{ fullname }}</p>

    <h3>用方法methods</h3>
    <!-- 方法调用需要加小括号 -->
    <p>{{ getfullName() }}</p>

    <!-- 二者区别是  计算属性计算一次就缓存了函数只执行了一次 ;  而方法就会调用多次 执行多次  所以计算属性在性能上会更好一些,更高效. -->
  </div>
</template>

<script>
export default {
  //data里面放数据  methods里放方法   computed里面放计算属性

  data() {
    return {
      xing: "夏",
      ming: "从政 ",
    };
  },
  methods: {
    getfullName() {
      return this.xing + this.ming;
    },
  },
  computed: {
    //计算属性(){
    //return '计算的结果'
    // }
    fullname() {
      return this.xing + this.ming;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>